<script setup>

import { ref, computed, onMounted } from 'vue';

const props = defineProps({
    visible: Boolean,
});

const emit = defineEmits(['close']);

const uploadModel = ref(false);
const videoName = ref('');
const videoDescription = ref('');
const videoFile = ref(null);
const coverSrc = ref('');
const editableDiv = ref(null);
const selectedFileName = ref('');

onMounted(() => {
    if(editableDiv.value) {
        editableDiv.value.innerHTML = videoDescription.value;
    }
});

const handleInput = () => {
    if(editableDiv.value) {
        videoDescription.value = editableDiv.value.innerHTML;
    }
};

const closeModel = () => {
    coverSrc.value = null;
    emit('close');
    
}

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    selectedFileName.value = file.name;
  } else {
    selectedFileName.value = '';
  }
};

const handleCoverFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
        const url = URL.createObjectURL(file);
        coverSrc.value = url;
    }
};

const handleSubmit = async () => {
    if (!videoFile.value.files[0]) {
    alert('请选择一个视频文件');
    return;
    }

    const formData = new FormData();
    formData.append('videoFile', videoFile.value.files[0]);
    formData.append('videoName', videoName.value);
    formData.append('videoDescription', videoDescription.value);

    try {
    const response = await fetch('http://localhost:8888/video/upload', {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        const data = await response.json();
        console.log('Success:', data);
        alert('视频上传成功！');
        uploadModel.value = false; // 关闭模态窗口
    } else {
        console.error('Error:', response.statusText);
        alert('视频上传失败，请重试。');
    }
    } catch (error) {
    console.error('Error:', error);
    alert('视频上传失败，请重试。');
    }
};

const tags = ref([
    { value: '' }
]);

const addTag = () => {
    tags.value.push({ value: '' });
}

const removeTag = (index) => {
    if(tags.value.length > 1) {
        tags.value.splice(index, 1);
    }
};

</script>

<template>

<div v-if="visible" class="model" @click.self="closeModel">
    <div class="model-content" @click.stop>
        <div class="model-header">
            <span class="close" @click="closeModel">&times;</span>
            <h2>上传视频</h2>
        </div>
        

        <form @submit.prevent="handleSubmit">
            <label for="videoFile" class="file-input-label">
                <span class="input-lable">选择视频文件</span>
            </label>
            <input type="file" id="videoFile" ref="videoFile" accept="video/*" class="file-input" @change="handleFileChange">
            
            <div v-if="selectedFileName" class="file-name-display">
                &emsp;{{ selectedFileName }}
            </div>

            <br><br>

            <div class="video-title">
                <div class="section-title-container">
                    <span>视频标题: </span>
                </div>

                <div class="video-title-content">
                    <div class="video-title-container">
                        <input type="text" id="videoName" v-model="videoName" class="header-upload-entry-title-input"><br><br>
                    </div>
                </div>
            </div>
            

            <div class="video-desc">
                <div class="section-desc-container">
                    <span>简介: </span>
                </div>

                <div class="video-desc-content">
                    <div class="video-desc-container" ref="editableDiv" contenteditable="true" @input="handleInput">
                    </div>
                </div>
            </div>

            <textarea id="videoDescription" v-model="videoDescription" style="display: none;"></textarea><br><br>

            <span>视频标签: </span><br><br>

            <div class="tag-input-container">
                <div v-for="(tag,index) in tags" :key="index" class="tag-input">
                    <input type="text" v-model="tag.value" placeholder="输入标签" />
                    <button type="button" @click="removeTag(index)">移除</button>
                </div>
                <button class="addTagButton" type="button" @click="addTag">+</button>
            </div>

            <br>

            <label for="coverFile" class="file-input-label">
                <span class="input-lable">选择视频封面</span>
            </label>
            <input type="file" id="coverFile" ref="coverFile" accept="image/*" class="file-input" @change="handleCoverFileChange">
            
            <br><br>

            <!-- 视频封面预览 -->
            <div v-if="coverSrc" class="video-preview">
                <img v-if="coverSrc" :src="coverSrc" alt="Video Cover" style="max-width: 100%; height: auto;">
            </div>

            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <button type="submit" class="header-upload-entry-button">提交</button>
            &emsp;&emsp;
            <button @click="closeModel" class="header-upload-entry-button">取消</button>
        </form>
    </div>
</div>

</template>

<style scoped>

.model {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 2000; /* 确保模态窗口在所有元素前面 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
}

.model-content {
    background-color: #fefefe;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    height: 80%;
    max-height: 900px;
    position: relative; /* 确保关闭按钮在模态窗口内 */
    overflow-y: auto;
}

.close {
    margin: 0 5px 0 0;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.video-preview img{
    background-color: black;
    margin: 0 50px 25px 50px;
    min-width: 400px;
    max-width: 400px;
    min-height: 250px;
    max-height: 250px;
    object-fit: contain;
}

.header-upload-entry-button {
  background-color: #fb7299; /* 背景颜色为蓝色 */
  color: white; /* 字体颜色为白色 */
  border: none; /* 去掉边框 */
  padding: 10px 20px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  cursor: pointer; /* 鼠标指针变为手形 */
  border-radius: 5px; /* 圆角 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

.header-upload-entry-button:hover {
  background-color: #df5179; /* 背景颜色变深 */
}

.header-upload-entry-title-input {
    margin: 8px 0 0 0;
    display: block;
    width: 100%;
    color: #222;
    line-height: 22px;
    height: 22px;
    font-size: 14px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background-color: transparent;
}

.video-title {
    display: flex;
    margin: 0 0 20px 0;
    align-items: flex-start;
    max-height: 45px;
}

.section-title-container {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    width: 94px;
}

.video-title-content {
    flex: 1;
    height: 40px;
}

.video-title-container {
    height: 40px;
    background: hsla(0, 0%, 84.7%, 0);
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    transition: border .3s ease;
}

.video-title-container:hover,
.video-title-container:focus-within {
    border: 1px solid #14b5ff;
}


.video-desc {
    display: flex;
    margin: 0 0 20px 0;
    align-items: flex-start;
    max-height: 160px;
}

.section-desc-container {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    width: 94px;
}

.video-desc-content {
    flex: 1;
    height: 160px;
    
}

.video-desc-container {
    height: 160px;
    font-size: 14px;
    background: hsla(0, 0%, 84.7%, 0);
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    padding: 4px 12px 4px 12px;
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
    flex-wrap: wrap;
    transition: border .3s ease;
    outline: none;
}

.video-desc-container:hover,
.video-desc-container:focus,
.video-desc-container:focus-within,
.video-desc-container:active {
    border: 1px solid #14b5ff;
}

.tag-input {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.tag-input input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.tag-input input:hover,
.tag-input input:focus {
  border: 1px solid #14b5ff;
}

.tag-input button {
  padding: 5px 10px;
  border: none;
  background-color: #fb7299;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.tag-input button:hover {
  background-color: #df5179;
}

.addTagButton {
    width: 30px;
    height: 25px;
    background-color: #fb7299;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.addTagButton:hover {
    background-color: #df5179;
}

/* 自定义滚动条样式 */
.model-content::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

.model-content::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景色 */
  border-radius: 4px; /* 轨道圆角 */
}

.model-content::-webkit-scrollbar-thumb {
  background: #88888866; /* 滚动条颜色 */
  border-radius: 4px; /* 滚动条圆角 */
}

.model-content::-webkit-scrollbar-thumb:hover {
  background: #8d8d8d; /* 滚动条悬停颜色 */
}

.model-content::-webkit-scrollbar-corner {
  background: transparent; /* 角落背景色 */
}

/* 自定义文件输入框样式 */
.file-input {
  display: none; /* 隐藏默认的文件输入框 */
}

.file-input-label {
  display: inline-block;
  cursor: pointer;
}

.file-name-display {
    display: inline;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

.input-lable {
    padding: 5px 10px 5px 10px;
    align-content: center;
    justify-content: center;
    display: grid;
    width: 100px;
    height: 35px;
    background-color: #fb7299;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.input-lable:hover {
    background-color: #df5179;
}

</style>